<!-- 面包屑菜单 -->
<template>
  <div class="bread-header p-x-32 p-y-16">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item v-if="$store.state.project.name && showProject">
        {{ $store.state.project.name }}
      </el-breadcrumb-item>
      <template v-for="item in $store.state[sessionKey]['routePaths']">
        <el-breadcrumb-item
          v-if="item.type === 'middle'"
          :key="item.id"
          :to="{ path: item.path }"
        >
          <span @click.prevent="routeTo(item)">
            {{ item.title }}
          </span>
        </el-breadcrumb-item>
        <el-breadcrumb-item v-else :key="item.id">
          {{ item.title }}
        </el-breadcrumb-item>
      </template>
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
  props: {
    sessionKey: {
      type: String,
      default: "index"
    },
    showProject: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    routeTo(route) {
      this.$utils.routeTo.call(this, { ...route, page: this.sessionKey });
    }
  }
};
</script>

<style lang="scss" scoped>
@include header-default-style;
.link {
  color: rgb(33, 150, 243);
  cursor: pointer;
}
.bread-header {
  height: auto;
  background-color: #ffffff;
}
</style>
